<script setup lang="ts">
import { IconFont } from '@nutui/icons-vue-taro'
const phone = '400-888-8888'
const email = 'contact@huasheng.com'
const address = '广西南宁市青秀区民族大道136号华润大厦B座2801室'
const companyIntro = `速驰软件是一家专注于互联网创新服务的高新技术企业，致力于为客户提供高效、智能、可靠的数字化解决方案。公司拥有一支经验丰富的研发与服务团队，业务涵盖平台开发、企业数字化转型、智能营销等多个领域。我们秉承“客户至上、创新驱动”的理念，助力企业实现数字化升级与可持续发展。`
</script>
<template>
  <view class="min-h-screen bg-[#f5f7fa] w-[750rpx] mx-auto flex flex-col justify-between">
    <!-- 渐变头部 -->
    <PageHeader title="" :showBack="true" :onlyBack="true"/>
    <view class="bg-gradient-to-r sticky top-0 z-[2] from-blue-600 to-purple-600 text-white p-[40rpx] text-center relative overflow-hidden">

      <view class="absolute w-[300rpx] h-[300rpx] bg-white bg-opacity-10 rounded-full -top-[100rpx] -right-[80rpx]"> </view>
      <view class="absolute w-[200rpx] h-[200rpx] bg-white bg-opacity-8 rounded-full -bottom-[80rpx] -left-[60rpx]"> </view>

      <text class="text-[42rpx] font-bold mb-[10rpx] block relative z-2">速驰软件</text>
      <text class="text-[26rpx] opacity-90 relative z-2">互联网创新服务专家</text>

    </view>
    <!-- <view class="bg-gradient-to-br from-[#2196F3] to-[#1976D2] text-white px-[30rpx] pt-[60rpx] pb-[36rpx] text-center">
      <text class="text-[44rpx] font-bold block mb-[10rpx]">华晟科技</text>
      <text class="text-[28rpx] opacity-90">互联网创新服务专家</text>
    </view> -->
    <view class="flex-1 px-[30rpx] pb-[30rpx]">
      <!-- 公司简介 -->
      <view class="bg-white rounded-[24rpx] shadow-md mb-[25rpx] p-[30rpx]">
        <view class="flex items-center mb-[15rpx]">
          <view class="w-[8rpx] h-[32rpx] bg-[#165DFF] rounded mr-[15rpx]"></view>
          <text class="text-[#165DFF] text-[32rpx] font-bold">公司简介</text>
        </view>
        <text class="text-[26rpx] text-[#666] leading-[1.8] block indent-2">{{ companyIntro }}</text>
      </view>
      <!-- 联系方式 -->
      <view class="bg-white rounded-[24rpx] shadow-md mb-[25rpx] p-[30rpx]">
        <view class="flex items-center mb-[15rpx]">
          <view class="w-[8rpx] h-[32rpx] bg-[#165DFF] rounded mr-[15rpx]"></view>
          <text class="text-[#165DFF] text-[32rpx] font-bold">联系我们</text>
        </view>
        <!-- 电话 -->
        <view class="flex items-center py-[15rpx] border-b border-[#f0f0f0]">
          <view class="w-[64rpx] h-[64rpx] bg-[#E3F2FD] rounded-full flex items-center justify-center mr-[32rpx]">
            <!-- <IconFont name="icon-phone" class="text-[28rpx]" color="#2196F3" /> -->
            <text class="text-[40rpx]">📞</text>
          </view>
          <view>
            <text class="text-[28rpx] font-bold text-[#222] block mb-[2rpx]">客服热线</text>
            <text class="text-[24rpx] text-[#666]">{{ phone }}</text>
          </view>
        </view>
        <!-- 邮箱 -->
        <view class="flex items-center py-[15rpx] border-b border-[#f0f0f0]">
          <view class="w-[64rpx] h-[64rpx] bg-[#E3F2FD] rounded-full flex items-center justify-center mr-[32rpx]">
            <!-- <IconFont name="icon-email" class="text-[28rpx]" color="#2196F3" /> -->
            <text class="text-[40rpx]">📮</text>
          </view>
          <view>
            <text class="text-[28rpx] font-bold text-[#222] block mb-[2rpx]">邮箱地址</text>
            <text class="text-[24rpx] text-[#666]">{{ email }}</text>
          </view>
        </view>
        <!-- 地址 -->
        <view class="flex items-center py-[15rpx]">
          <view class="w-[64rpx] h-[64rpx] bg-[#E3F2FD] rounded-full flex items-center justify-center mr-[32rpx]">
            <!-- <IconFont name="icon-map-marked-alt" class="text-[28rpx]" color="#2196F3" /> -->
            <text class="text-[40rpx]">🧭</text>
          </view>
          <view>
            <text class="text-[28rpx] font-bold text-[#222] block mb-[2rpx]">公司地址</text>
            <text class="text-[24rpx] text-[#666]">{{ address }}</text>
          </view>
        </view>
      </view>
      <!-- 拨打电话按钮 -->
      <a :href="`tel:${phone}`" class="block bg-[#2196F3] text-white no-underline py-[15rpx] rounded-[25rpx] text-center text-[32rpx] font-bold shadow-lg mt-[30rpx] mb-[10rpx] active:scale-98 transition-all">立即拨打电话</a>
    </view>
    <!-- 页脚 -->
    <view class="bg-[#f5f7fa] text-center text-[24rpx] text-[#999] py-[20rpx]">© 2025 速驰软件 版权所有</view>
  </view>
</template>
